<!-- 划扣记录 -->
<template>
  <div class="main-content-container">
    <div ref="search">
      <el-form>
        <el-row>
          <el-col :span="12" class="searchs-y">
            <el-form-item>
              <el-input v-model="custQuery" placeholder="姓名、手机号、会员号" clearable @change="handleChange">
                <el-button slot="append" icon="el-icon-search" @click="handleChange" />
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="float-l">
          <Search :data="selections" :attribute="'deductionTime'" @change="handleTypeChange" @dateChange="handleDateChange" />
          <el-form-item style="margin-left: 10px">
            <el-select v-model="query.projectType" class="el-select-y" placeholder="请选择项目属性" @change="handleChange">
              <el-option
                v-for="item in orderTypeList"
                :key="item.id"
                :label="item.value"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 92) + 'px'">
      <el-table :data="dataList" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="项目" prop="projectName" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="项目属性" prop="projectType" :show-overflow-tooltip="true" /> -->
        <el-table-column label="项目单号" prop="projectNo" :show-overflow-tooltip="true" />
        <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
        <el-table-column label="划扣时间" prop="deductionTime" :show-overflow-tooltip="true" />
        <el-table-column label="划扣人" prop="deductionName" :show-overflow-tooltip="true" />
        <el-table-column label="执行数量" prop="executionQuantity" :show-overflow-tooltip="true" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="collection(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :page-num="queryParams.page"
        :page-size="queryParams.pageSize"
        :on-change="handlePaginationChange"
        :total="total"
      />
    </div>
    <Details :visible.sync="visible" :current-row.sync="currentRow" @close="visible = false;" />
  </div>
</template>

<script>
import Search from "@/components/Search";
import { selections } from "@/config";
import Details from "./details";
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    Search,
    Details,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      custQuery: "",
      selections,
      query: {},
      orderTypeList: [{ id: 1, value: "美容项目", label: '美容项目' }, { id: 2, value: "手术项目", label: '手术项目' }, { id: 3, value: "检查项目", label: '检查项目' }, { id: 4, value: "其他项目", label: '其他项目' }],
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      dataList: [],
      visible: false,
      currentRow: {},
    };
  },
  mounted() {
    const deptUsrList = this.$store.getters.currentUserInfo.deptUsrList;
    const idList = [];
    deptUsrList.forEach(item => {
      idList.push(item.deptId);
    });
    this.query.deptId = idList.join(",");
    this.getList();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    async getList() {
      const query = JSON.parse(JSON.stringify(this.query));
      if (!query.projectType) query.projectType = undefined;
      if (!query.deductionTime) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const beginTime = year + "-" + month + "-" + day + " 00:00:00";
        const endTime = year + "-" + month + "-" + day + " 23:59:59";
        query.timeType = "today";
        query.deductionTime = beginTime + "_" + endTime;
      }
      const res = await this.$api['department/drawrecord/recordPage']({ ...this.queryParams, query: { ...query }, custQuery: this.custQuery });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.dataList = res.data.result;
      this.total = res.data.total;
    },
    handleTypeChange(item) {
      this.queryParams.page = 1;
      Object.assign(this.query, item);
      this.getList();
    },
    handleDateChange(item) {
      this.queryParams.page = 1;
      Object.assign(this.query, item);
      this.getList();
    },
    handleChange() {
      this.queryParams.page = 1;
      this.getList();
    },
    handlePaginationChange(pagination) {
      this.queryParams = { page: pagination.pageNum, pageSize: pagination.pageSize };
      this.getList();
    },
    async collection(row) {
      const res = await this.$api['department/drawrecord/recordDetails']({ id: row.id });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.currentRow = res.data;
      const list = [];
      const json = {
        customerName: this.currentRow.customerName,
        projectName: this.currentRow.projectName,
        executionQuantity: this.currentRow.executionQuantity,
      };
      list.push(json);
      this.$set(this.currentRow, 'customerList', list);
      this.visible = true;
    },
  },
};
</script>
<style>
</style>
